import React from 'react'
import classNames from 'classnames'
import Button from "../Button/Button"
import './table.css'

/*
* 排序按钮无状态组件
* activeSortKey: 当前正在排序列名
* sortKey: 需要排序列名
* onSort: 单击事件,排序方法
* children: 排序按钮显示内容
* */
const Sort = ({ activeSortKey, sortKey, onSort, children }) => {
  // 列名和当前被选中列明一样,会附加一个button-active的css样式
  const sortClassName = classNames('button-inline', {'button-active': activeSortKey === sortKey})

  return (
    <React.Fragment>
      <Button onClick={() => onSort(sortKey)} className={sortClassName}>{children}</Button>
    </React.Fragment>
  )
}

export default Sort
